<template>
  <div class="mainbox">
    <banner></banner>
    <!--人人为我，我为人人-->
    <img src="../../assets/images/list_new/woweirenren.png" alt="" class="ren">
    <img src="../../assets/images/list_new/renrenweiwo.png" alt="" class="wo">
    <!--人人为我，我为人人-->
    <main-content :catname="this.$route.query.name">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{this.$route.query.name}}</dt>
          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>

        </dl>
      </div>
      <div class="inner_content" slot="inner_content">
        <div class="page_con">
          <router-view @childData="getactive"></router-view>
        </div>
      </div>

    </main-content>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>


  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';

  export default {
    name: "score_list",
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
    },
    data(){
      return {
        new_menu_list:[],//新列表的菜单数组
        active:0,//当前的激活选项，默认为0
        new_rich_content:'',//新的富文本内容
        is_flag:null,//判断文章的显示状态，0文章页，1列表，
        dynamicList: [],//富文本数据
        article_param:null,//请求的参数
        page:1,
        size:6,
        isEmpty:false,
        title_detail:'',
       // active:2,
        catename:'志愿服务',
        menu_bg:''
      }
    },

    created(){
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.getColumnContent();
    },

    methods: {

      ToNewPath(item,index){
        let that = this;
        that.active=index;
        console.log('点击获得的item值为：',item);
        that.title_detail=item.title;
        console.log('点击获得的item值为：',item);
        that.getPageAndLink(item,index);

      },

      toPath(id) {
        console.log('进入详情页面：', id);
        this.$router.push("/detail?id=" + id+"&name="+this.title);
      },//点击进入详情页面

      getColumnContent(){
        let that = this;
        let params = {
          vollege_id:that.$util.vollege_id,
          pid:that.$route.query.pid
        };
        that.$http.get("/api/PcData/getMenuData",params,r=>{
          console.log('获得的栏目数据为：r：',r.data.menu);
          that.new_menu_list=r.data.menu;
          that.getPageAndLink(r.data.menu[0],0);//判断第一项是文章还是列表，默认不能在后台设置成链接页面
        });
      },//获取栏目菜单，类型为文章页，列表页，混合页

      getPageAndLink(item,index){
        let that = this;
        console.log('item.content_type:',item.content_type);
        that.article_param=item.param;
        item.content_type != "url" ? that.isListContent(item):that.$router.push({path:item.url,query:{name:item.title,pid:item.id,childdata:index}});
      },//判断是文章还是外链

      isListContent(item){
        let that = this;
        let params = {
          page:that.page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+item.param +"&vollege_id="+that.$util.vollege_id,params,r=>{
          console.log('获得的文章信息为：',r.data);
          r.data.length==1?that.is_flag=0:that.is_flag=1;
          r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
          r.data.length==0?that.isEmpty=true:that.isEmpty=false;
        });

      },//判断是否是列表还是单页面

      pageChange(page){
        console.log('页码发生了改变！当前页码：',page);
        let that = this;
        let params = {
          page:page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+that.article_param +"&vollege_id="+that.$util.vollege_id,params,r=>{
          console.log('获得的文章信息为：',r.data);
          r.data.length==1?that.is_flag=0:that.is_flag=1;
          r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
          r.data.length==0?that.isEmpty=true:that.isEmpty=false;
        });
      },

      getactive(data){
        let that = this;
        console.log('子组件传递过来的值为：',data);
        if (data){
          that.active=data;
        }else{
          that.active=0;
        }
      },


    }
  }
</script>

<style scoped>
  .ren{
    position: absolute;
    z-index: 1000;
    top: 18%;
    left: 54%;
  }
  .wo{
    position: absolute;
    top: 18%;
    left: 20%;
    z-index: 1000;

  }
  .page_con{
    padding-right: 0px !important;
  }
  .son_menu{
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color:#fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }
  .son_menu.hover{
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }
  .menu_dd.have{
    transition: all 0.3s ease-in;
  }
  .inner_content {
    padding: 60px 40px 0 40px;
  }
</style>
